<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <style>
      html,
      body,
      #map,
      #canvas {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }

  </style>
</head>
<body>
<div id="map">
</div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    const rootPath = window.location;
    const style = {
        "version": 8,
        "name": "lzugis",
        "sprite": rootPath + "sprite",
        "glyphs": rootPath + "fonts/mapbox/{fontstack}/{range}.pbf",
        "center": [103.081163, 37.1612],
        "zoom": 3.45,
        "bearing": 70,
        "pitch": 60,
        "light": {
            "anchor": "viewport",
            "color": "white",
            "intensity": 0.4
        },
        "transition": {
            "duration": 300,
            "delay": 100
        },
        "sources": {
            "XYZTile": {
                "type": "raster",
                "tiles": ['https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'],
                "tileSize": 256
            }
        },
        "layers": [{
            'id': 'background',
            'type': 'background',
            'paint': {
                'background-color': '#000',
                'background-opacity': 0.8
            }
        }, {
            "id": "XYZTile",
            "type": "raster",
            "source": "XYZTile",
            "minzoom": 0,
            "maxzoom": 17
        }]
    }
    const dom = document.getElementById('map');
    window.map = new mapboxgl.Map({
        container: dom,
        style: style,
        center: [103.081163, 37.1612],
        zoom: 2,
        minZoom: 2,
        maxZoom: 18
    });
    map.on('load', () => {
        map.loadImage('data/icon.png', function(error, image) {
            if (error) throw error;
            map.addImage('icon', image);

            map.addSource('geojson', {
                type: 'geojson',
                data: 'data/point.geojson'
            })
            // map.addLayer({
            //     'id': 'geojson',
            //     'source': 'geojson',
            //     'type': 'symbol',
            //     'minzoom': 3,
            //     'maxzoom': 10,
            //     'layout': {
            //         'icon-image': 'icon',
            //         'icon-size': [
            //             'interpolate',
            //             ['linear'],
            //             ['zoom'],
            //             3, 0.2,
            //             5, 0.4,
            //             8, 0.6
            //         ],
            //         'icon-allow-overlap': true
            //     }
            // });

            // 唯一值图
            var fillColor = [
                'match',
                ['get', 'level'],
                1, '#ea2908',
                2, '#f5a33a',
                '#005bff'
            ];

            /*// 分级色彩图
            var fillColor = [
                'case',
                ['<', ['get', 'count'], 10], '#FFD273',
                ['<', ['get', 'count'], 20], '#E86D68',
                ['<', ['get', 'count'], 30], '#A880FF',
                ['<', ['get', 'count'], 40], '#68E0E8',
                ['<=', ['get', 'count'], 50], '#9BFF69',
                '#000' // 默认值
            ];

            // 比例符号图
            var fillColor = [
                'interpolate',
                ['linear'],
                ['get', 'count'],
                15, '#FFD273',
                30, '#E86D68',
                50, '#9BFF69'
            ];

            // 步长图
            var fillColor = [
              'step',
              ['get', 'count'],
              '#0098A3',
              10, '#00CA8D',
              20, '#37C508',
              30, '#98F300',
              40, '#EFFF85'
            ]*/

            map.addLayer({
                'id': 'geojson1',
                'source': 'geojson',
                'type': 'circle',
                'paint': {
                    'circle-color': fillColor,
                    'circle-radius': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        3, 6,
                        5, 8,
                        8, 10
                    ]
                }
            });
        });
    })
</script>
</body>
</html>